<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Todo list</title>

  <link rel="stylesheet" type="text/css" title="Default Style" href="../../style/style.css" media="screen" />

  <style type="text/css" id="demo-css">

    #demo-container
    {
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    #TodoListPanel
    {
      height: 100%;
      float: left;
      width: 300px;
      border-right: 3px solid #D9E8FB;
    }

    .Basis-Calendar
    {
      height: 100%;
      overflow: hidden;
      position: relative;
      width: auto;
    }

    .Basis-Calendar-Header,
    .Basis-Calendar-Footer
    {
      display: none;
    }
    .Basis-Calendar-Body
    {
      border: none;
      position: static;
    }
    .Basis-Calendar-Section
    {
      position: static;
      width: auto;
      height: auto;
    }
    .Basis-Calendar-SectionContent
    {
      position: absolute;
      top: 40px;
      bottom: 0;
      left: 0;
      right: 0;
      height: auto;
      overflow: visible;
    }
    .Basis-Calendar-MonthWeekDays
    {
      position: absolute;
      bottom: 100%;
    }
    .Basis-Calendar-MonthWeekDays-Day
    {
      width: 14.28%;
    }
    .Basis-Calendar-Section-Month .Basis-Calendar-Node
    {
      width: 14.28%;
      height: 16.66%;
    }
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis.js"></script>
  <script type="text/javascript" src="../../date.js"></script>
  <script type="text/javascript" src="../../data.js"></script>
  <script type="text/javascript" src="../../entity.js"></script>
  <script type="text/javascript" src="../../property.js"></script>
  <script type="text/javascript" src="../../dom_wrapper.js"></script>
  <script type="text/javascript" src="../../calendar.js"></script>
  <script type="text/javascript" src="../../locale/ru/calendar.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basis Demos: Todo list</h1>

  <p id="demo-summary">
    ...
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script id="demo-javascript" type="text/javascript">

    Basis.Event.onLoad(function(){
      var DOM = Basis.DOM;
      var nsData = Basis.Data;
      var nsWrapper = Basis.DOM.Wrapper;
      var nsEntity = Basis.Entity;
      var nsCalendar = Basis.Controls.Calendar;

      var Task = new nsEntity.EntityType({
        name: 'Task',
        fields: {
          TaskId: nsEntity.NumberId,
          Date: Function.$self,
          Text: String
        }
      });

      var taskByDate = new nsData.Dataset.Split({
        source: Task.all,
        rule: function(task){
          return task.data.Date.toISODateString();
        }
      });

      var todoList = new nsWrapper.TmplContainer({
        dataSource: Task.all,

        template:
          '<div id="TodoListPanel">' +
            '<div>panel</div>' +
            '<!--{childNodeHere}-->' +
          '</div>',

        childClass: basis.ui(
          '<li>' +
            '<span>{this_data_Date}</span>' +
            '<div>{this_data_Text}</div>' +
          '</li>'
        )
      });

      var todoCalendar = new nsCalendar.Calendar({
        sections: null,
        childNodes: [
          new nsCalendar.CalendarSection.Month({
            childClass: {
              template:
                '<div{element} class="Basis-Calendar-Node" event-click="click">' +
                  '<span class="title">{title}</span>' +
                  '<!--{taskList}-->' +
                '</div>',

              satelliteConfig: {
                taskList: {
                  dataSource: function(owner){
                    return owner.data.periodStart
                      ? taskByDate.getSubset(owner.data.periodStart.toISODateString(), true)
                      : null;
                  },
                  instanceOf: nsWrapper.TmplContainer.subclass({
                    childClass: basis.ui(
                      '<div>' +
                        '<span>{this_data_Date}</span>' +
                        '<div>{this_data_Text}</div>' +
                      '</div>'
                    )
                  })
                }
              }
            }
          })
        ]
      });

      Task.all.sync([
        { Date: new Date(2011, 07, 05), Text: 'test1' },
        { Date: new Date(2011, 07, 01), Text: 'test2' },
        { Date: new Date(2011, 08, 05), Text: 'test3' },
        { Date: new Date(2011, 07, 01), Text: 'test4' },
        { Date: new Date(), Text: 'test5' }
      ])

      DOM.insert('demo-container', [
        todoList.element,
        todoCalendar.element
      ]);

    });

  </script>  
</body>

</html>